import { Button, Space } from 'ant-design-vue'
import moment from 'moment'
import { defineComponent, ref } from 'vue'
import { useRoute } from 'vue-router'

import qzyApi from '@/apis/qzyApi'
import { ProTable, ProTableProps, ProTableRef } from '@/components'
import { TABLE_FORMAT, TABLE_ITEM_RENDER, TABLE_RENDERER } from '@/constants'
import { optionsToMap } from '@/utils'

export default defineComponent({
  name: 'QzyInventoryLog',
  setup() {
    const route = useRoute()
    const tableRef = ref({} as ProTableRef)
    const tableConfig = ref<ProTableProps>({
      fixedHeight: true,
      options: {
        border: true,
        align: 'center',
        proxyConfig: {
          form: true,
          props: {
            result: 'records',
            total: 'total'
          },
          ajax: {
            query: async ({ page, form }) => {
              const data = await qzyApi.getLogList({
                activityId: route.query.id,
                pageSize: page.pageSize,
                pageNo: page.currentPage,
                ...form
              })
              return data
            }
          }
        },
        formConfig: {
          items: [
            {
              title: '操作时间',
              itemRender: {
                name: TABLE_RENDERER.FormItemDate,
                props: {
                  type: 'range',
                  placeholder: ['开始时间', '结束时间'],
                  valueFormat: 'x',
                  showTime: {
                    defaultValue: [
                      moment('00:00:00', 'HH:mm:ss'),
                      moment('23:59:59', 'HH:mm:ss')
                    ]
                  },
                  keys: ['startTime', 'endTime']
                }
              }
            },
            {
              title: '操作人',
              field: 'memberName',
              itemRender: {
                name: TABLE_ITEM_RENDER.AInput,
                props: {
                  placeholder: '请输入操作人',
                  style: {
                    width: '200px'
                  }
                }
              }
            },
            {
              title: '商品碎片名称',
              field: 'content',
              itemRender: {
                name: TABLE_ITEM_RENDER.AInput,
                props: {
                  placeholder: '请输入商品碎片名称',
                  style: {
                    width: '200px'
                  }
                }
              }
            },
            {
              itemRender: {
                name: TABLE_RENDERER.FormItemBtns
              }
            }
          ]
        },
        columnConfig: {
          minWidth: 100,
          resizable: true
        },
        columns: [
          {
            title: '商品碎片名称',
            field: 'content'
          },
          {
            title: '操作时间',
            field: 'createTime',
            formatter: TABLE_FORMAT.Date
          },

          {
            title: '碎片数量',
            field: 'num',
            formatter: ({ cellValue }) => {
              return '+' + cellValue
            }
          },
          {
            title: '操作人',
            field: 'opeName'
          }
        ],
        pagerConfig: {
          pageSize: 10
        }
      }
    })
    return {
      route,
      tableRef,
      tableConfig
    }
  },
  render() {
    return (
      <div>
        <ProTable ref="tableRef" v-slots={{}} {...this.tableConfig} />
      </div>
    )
  }
})
